<template>
	<view class="tabber">
		<up-tabbar :value="tabberIndex" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" :border="false">
			<template v-for="(item, index) in tabbarList" :key="index">
				<up-tabbar-item :text="item.name" @click="toPageFun(item)" :icon="getTabbarIcon(item, index)"></up-tabbar-item>
			</template>
		</up-tabbar>
		<!-- 凸起 -->
		<view class="centerIcon" @click="centerIconClick">
			<img
				class="centerImage"
				:class="{ iosCss1: deviceType1, iosCss2: deviceType2 }"
				src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/new-fire-iot/addIcon.png"
				alt=""
			/>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useTabbar } from '@/pinia/tabber.js'; // 导入 tabbar.js 中暴露的方法
import { storeToRefs } from 'pinia'; // 导入 pinia 中暴露的数据转换为响应式的方法
const tabbar = useTabbar(); // 实例化 tabbar.js 中暴露的方法
const { tabberIndex } = storeToRefs(tabbar); // 转换为响应式数据
const tabbarList = ref([
	{
		index: 0,
		name: '首页',
		icon: 'https://fire-system.oss-cn-beijing.aliyuncs.com/web/new-fire-iot/home.png',
		activeIcon: 'https://fire-system.oss-cn-beijing.aliyuncs.com/web/new-fire-iot/home-select.png'
	},
	{
		index: 1,
		name: '设备',
		icon: 'https://fire-system.oss-cn-beijing.aliyuncs.com/web/new-fire-iot/home.png',
		activeIcon: 'https://fire-system.oss-cn-beijing.aliyuncs.com/web/new-fire-iot/home-select.png'
	},
	{
		index: 2,
		name: '',
		icon: '',
		activeIcon: ''
	},
	{
		index: 3,
		name: '消息',
		icon: 'https://fire-system.oss-cn-beijing.aliyuncs.com/web/new-fire-iot/home.png',
		activeIcon: 'https://fire-system.oss-cn-beijing.aliyuncs.com/web/new-fire-iot/home-select.png'
	},
	{
		index: 4,
		name: '我的',
		icon: 'https://fire-system.oss-cn-beijing.aliyuncs.com/web/new-fire-iot/personel.png',
		activeIcon: 'https://fire-system.oss-cn-beijing.aliyuncs.com/web/new-fire-iot/personel-select.png'
	}
]);
// 导航栏凸起相关
let deviceType1 = ref(null);
let deviceType2 = ref(null);
onLoad(() => {
	uni.getSystemInfo({
		success: (res) => {
			// console.log('所获取设备数据皆来自设备', res);
			if (res.osName == 'ios') {
				if (res.deviceModel == 'iPhone 6/7/8') {
				} else if (res.deviceModel == 'iPhone 6/7/8 Plus') {
				} else if (res.deviceModel == 'iPhone X') {
					deviceType2.value = true;
				} else {
					deviceType1.value = true;
				}
			}
		}
	});
});
// 给icon赋值index
const toPageFun = (item) => {
	// 把当前点击索引更新到 tabbar.js 里面的 tabberIndex 状态数据
	if (item.index !== 2) {
		tabbar.changeTabberIndex(item.index);
	}
};

// 图标的切换
const getTabbarIcon = (item, index) => {
	return tabberIndex.value === index ? item.activeIcon : item.icon;
};

// 凸起点击
const emit = defineEmits(['centerIcon']);
const centerIconClick = () => {
	emit('centerIcon');
};
</script>

<style lang="scss" scoped>
.tabber {
	width: 100%;
	.centerIcon {
		position: fixed;
		left: 42.5%;
		bottom: 0;
		z-index: 2;
		.centerImage {
			width: 115rpx;
			height: 115rpx;
		}
	}
	.iosCss1 {
		bottom: 4.5% !important;
	}
	.iosCss2 {
		bottom: 5.5% !important;
	}
}

.u-page {
	padding: 0;

	&__item {
		&__title {
			color: $u-tips-color;
			background-color: $u-bg-color;
			padding: 15px 15px 5px 15px;
			font-size: 15px;

			&__slot-title {
				color: $u-primary;
				font-size: 14px;
			}
		}

		&__slot-icon {
			width: 17px;
			height: 17px;
		}
	}
}
</style>
